<template>
    <div class="title">
        <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
            <div class="container">
                <el-row>
                    <el-col :span="22">
                        <a class="navbar-brand" href="/">
                            教职工餐补系统
                        </a>
                    </el-col>
                    <el-col :span="2">
                        <el-dropdown style="margin-top: 10px;" v-if="username">
      <span class="el-dropdown-link" style="color: white;">
        {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-setting" @click.native="dialogFormPassword = true">修改密码
                                </el-dropdown-item>
                                <el-dropdown-item icon="el-icon-remove" @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </div>
        </nav>
        <el-dialog title="修改密码" :visible.sync="dialogFormPassword">
            <el-form :model="passwordForm">
                <el-form-item label="原密码" :label-width="formLabelWidth">
                    <el-input type="password" v-model="passwordForm.oldPassword" autocomplete="off"></el-input>
                    <p class="error-text" v-show="oldPasswordError">{{oldPasswordError}}</p>
                </el-form-item>
                <el-form-item label="新密码" :label-width="formLabelWidth">
                    <el-input type="password" v-model="passwordForm.newPassword" autocomplete="off"></el-input>
                    <p class="error-text" v-show="newPasswordError">{{newPasswordError}}</p>
                </el-form-item>
                <el-form-item label="确认密码" :label-width="formLabelWidth">
                    <el-input type="password" v-model="passwordForm.c_newPassword" autocomplete="off"></el-input>
                    <p class="error-text" v-show="c_newPasswordError">{{c_newPasswordError}}</p>
                    <p class="error-text" v-show="MessageError">{{MessageError}}</p>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormPassword = false">取 消</el-button>
                <el-button type="primary" @click="changePassword">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import cookie from '../../static/js/cookie';
    import {ChangePassword, Logout} from '../../api/api'

    export default {
        name: "title_head",
        data() {
            return {
                username: cookie.getCookie('name'),
                dialogFormPassword: false,
                passwordForm: {
                    oldPassword: null,
                    newPassword: null,
                    c_newPassword: null
                },
                formLabelWidth: '120px',
                oldPasswordError: '',
                newPasswordError: '',
                c_newPasswordError: '',
                MessageError: '',
            }
        },
        methods: {
            logout() {
                let that = this;
                /*cookie.setCookie('name', '', 7);
                cookie.setCookie('token', '', 7);
                this.$store.dispatch('setInfo');
                this.$router.push({name: 'login'})*/
                Logout().then(res => {
                    that.$router.push({name: 'login'})
                }).catch(error => {
                    console.log(error);
                });
            },
            changePassword() {
                let that = this;
                ChangePassword(this.passwordForm).then(res => {
                    that.dialogFormPassword = false;
                    that.$router.push({name: 'login'})
                }).catch(error => {
                    console.log(error);
                    that.oldPasswordError = '';
                    that.newPasswordError = '';
                    that.c_newPasswordError = '';
                    that.MessageError = '';
                    if (error.hasOwnProperty('errors')) {
                        if ("oldPassword" in error.errors) {
                            that.oldPasswordError = error.errors.oldPassword[0];
                        }
                        if ("newPassword" in error.errors) {
                            that.newPasswordError = error.errors.newPassword[0];
                        }
                        if ("c_newPassword" in error.errors) {
                            that.c_newPasswordError = error.errors.c_newPassword[0];
                        }
                    }
                    if ("Message" in error) {
                        that.MessageError = error.Message;
                    }
                })
            },
        },
        watch: {
            $route(now, old) {
                if (now.path == "/app/login") {
                    this.username = false;
                } else {
                    this.username = cookie.getCookie('name');
                }
            }
        }
    }
</script>

<style scoped>
    .error-text {
        color: #fa8341;
    }
</style>
